<template>
  <div>
    <el-dialog :title="this.$parent.tabtitle" :visible.sync="addFormVisible" width="30%">
      <el-form label-width="110px" label-position="left">
        <el-form-item label="图片/视频">
          <audioPicUpload ref="audiopicupload" v-model="topContent" v-if="topContentShow"></audioPicUpload>
        </el-form-item>
        <el-form-item label="展示区域">
          <el-select v-model="bannerValue.display_area" placeholder="请选择">
            <el-option label="顶部区域" value="0"></el-option>
            <el-option label="轮播区域" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="优先展示指数">
          <el-input v-model="bannerValue.sort" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="链接">
          <el-input v-model="bannerValue.link_url" style="width:300px" value="sss"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="setBanner">确认</el-button>
          <el-button @click.native="addFormVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>


</template>

<script>
  import audioPicUpload from '@/components/audioPicUpload'
    export default {
      components: {audioPicUpload},
      name: "bannerdialog",
      data(){
        return{
          addFormVisible: true,
          bannerValue : {},
          topContentShow:true,
          topContent:{
            src:'',
            srcId:'',
            type:'',//文件类型video,img

            video_post_id:'',//视频封面图片id
            video_post_src:''//视频封面图片
          },
        }
      },
      mounted(){
        this.addFormVisible = false;
      },
      methods:{
        //提交添加/修改
        setBanner(){
          this.$parent.setBanner();
        }
      },
      watch: {
        'addFormVisible': function (newVal) {
          if (newVal == false){
            if (this.bannerValue.img_url){
              this.$refs.audiopicupload.switchType = false;
              this.$refs.audiopicupload.addForm.src = '';
              this.$refs.audiopicupload.addForm.type = '';
            }
            this.bannerValue = {}
          }else {
            if (this.bannerValue.img_url){
              this.$refs.audiopicupload.addForm.src = this.bannerValue.img_url;
              this.$refs.audiopicupload.addForm.type = 'img';
            }
          }
        },
        'topContent' : function (newVal) {
          if (newVal.type == 'img'){
            this.bannerValue.link_url = newVal.src;
            this.bannerValue.img_id = newVal.srcId;
          }else {
            this.bannerValue.link_url = newVal.video_post_src;
            this.bannerValue.img_id = newVal.video_post_id;
          }
        }
      }
    }
</script>

<style scoped>

</style>
